<template>
  <div class="box2 ipad-zu" v-if="data">
    <div class="pro">
      <div>
        <img :src="`${data.img1}`" />
      </div>
      <div class="text">
        <div>
          <img :src="`${data.img2}`" />
        </div>
        <p class="p1">iPad Pro</p>
        <p>终极iPod体验</p>
        <p>RMB 6199 起</p>
        <router-link class="btn" to="/ipadPro">购买 </router-link>
        <router-link to="/ipadPro">进一步了解 > </router-link>
      </div>
    </div>
    <div class="air">
      <div>
        <img :src="`${data.img3}`" />
      </div>
      <div class="text">
        <div>
          <img :src="`${data.img4}`" />
        </div>
        <p class="p2">iPad Air</p>
        <p>凭实力出彩</p>
        <p>RMB 4399 起</p>
        <router-link class="btn" to="/ipadAir">购买 </router-link>
        <router-link to="/ipadAir">进一步了解 > </router-link>
      </div>
    </div>
    <div class="ipad">
      <div>
        <img :src="`${data.img5}`" />
      </div>
      <div class="text">
        <div>
          <img :src="`${data.img2}`" />
        </div>
        <p class="p3">iPad</p>
        <p>特有本事特超值</p>
        <p>RMB 2499 起</p>
        <router-link class="btn" to="/ipad10-2">购买 </router-link>
        <router-link to="/ipad10-2">进一步了解 > </router-link>
      </div>
    </div>
    <div class="mini">
      <div>
        <img :src="`${data.img6}`" />
      </div>
      <div class="text">
        <div>
          <img :src="`${data.img7}`" />
        </div>
        <p class="p4">iPad mini</p>
        <p>小写的大</p>
        <p>RMB 3799 起</p>
        <router-link class="btn" to="/ipadMini">购买 </router-link>
        <router-link to="/ipadMini">进一步了解 > </router-link>
      </div>
    </div>
    <div>
      <p>12.9 英寸和 11 英寸</p>
      <div>
        <p>12.9 英寸 Liquid 视网膜</p>
        <p>XDR 显示屏1</p>
        <p>11 英寸 Liquid 视网膜显示屏</p>
      </div>
    </div>
    <div>
      <p>10.9 英寸</p>
      <div>
        <p>Liquid 视网膜显示屏1</p>
      </div>
    </div>
    <div>
      <p>10.2 英寸</p>
      <div>
        <p>视网膜显示屏</p>
      </div>
    </div>
    <div>
      <p>8.3 英寸</p>
      <div>
        <p>Liquid 视网膜显示屏1</p>
      </div>
    </div>

    <div>
      <img :src="`${data.img8}`" />
      <div>
        <p>M1 芯片</p>
      </div>
    </div>
    <div>
      <img :src="`${data.img8}`" />
      <div>
        <p>M1 芯片</p>
      </div>
    </div>
    <div>
      <img :src="`${data.img9}`" />
      <div>
        <p>A13 仿生芯片</p>
      </div>
    </div>
    <div>
      <img :src="`${data.img10}`" />
      <div>
        <p>A15 仿生芯片</p>
      </div>
    </div>

    <div>
      <img :src="`${data.img11}`" />
      <div>
        <p>1200 万像素广角</p>
        <p>和 1000 万像素超广角后置摄像头</p>
      </div>
    </div>
    <div>
      <img :src="`${data.img12}`" />
      <div>
        <p>1200 万像素超广角后置摄像头</p>
      </div>
    </div>
    <div>
      <img :src="`${data.img14}`" />
      <div>
        <p>800 万像素超广角后置摄像头</p>
      </div>
    </div>
    <div>
      <img :src="`${data.img13}`" />
      <div>
        <p>1200 万像素超广角后置摄像头</p>
      </div>
    </div>

    <div>
      <p>1200 万像素</p>
      <div>
        <p>原深感前置摄像头</p>
        <p>自带人物居中</p>
      </div>
    </div>
    <div>
      <p>1200 万像素</p>
      <div>
        <p>超广角前置摄像头</p>
        <p>自带人物居中</p>
      </div>
    </div>
    <div>
      <p>1200 万像素</p>
      <div>
        <p>超广角前置摄像头</p>
        <p>自带人物居中</p>
      </div>
    </div>
    <div>
      <p>1200 万像素</p>
      <div>
        <p>超广角前置摄像头</p>
        <p>自带人物居中</p>
      </div>
    </div>

    <div>
      <img :src="`${data.img15}`" />
      <div>
        <p>USB-C 接口</p>
        <p>支持雷雳 / USB 4</p>
      </div>
    </div>
    <div>
      <img :src="`${data.img16}`" />
      <div>
        <p>USB-C 接口</p>
      </div>
    </div>
    <div>
      <img :src="`${data.img17}`" />
      <div>
        <p>闪电接口</p>
      </div>
    </div>
    <div>
      <img :src="`${data.img16}`" />
      <div>
        <p>USB-C 接口</p>
      </div>
    </div>

    <div>
      <img :src="`${data.img18}`" />
      <div>
        <p>5G 蜂窝网络2</p>
      </div>
    </div>
    <div>
      <img :src="`${data.img18}`" />
      <div>
        <p>5G 蜂窝网络2</p>
      </div>
    </div>
    <div>
      <img :src="`${data.img19}`" />
      <div>
        <p>4G LTE 蜂窝网络2</p>
      </div>
    </div>
    <div>
      <img :src="`${data.img19}`" />
      <div>
        <p>5G 蜂窝网络2</p>
      </div>
    </div>

    <div>
      <img :src="`${data.img20}`" />
      <div>
        <p>支持 Apple Pencil</p>
        <p>(第二代)</p>
      </div>
    </div>
    <div>
      <img :src="`${data.img20}`" />
      <div>
        <p>支持 Apple Pencil</p>
        <p>(第二代)</p>
      </div>
    </div>
    <div>
      <img :src="`${data.img20}`" />
      <div>
        <p>支持 Apple Pencil</p>
        <p>(第一代)</p>
      </div>
    </div>
    <div>
      <img :src="`${data.img20}`" />
      <div>
        <p>支持 Apple Pencil</p>
        <p>(第二代)</p>
      </div>
    </div>

    <div class="ipad-8-1">
      <img :src="`${data.img21}`" />
      <div>
        <p>支持妙控键盘和</p>
        <p>键盘式智能双面夹</p>
      </div>
    </div>
    <div class="ipad-8-2">
      <img :src="`${data.img21}`" />
      <div>
        <p>支持妙控键盘和</p>
        <p>键盘式智能双面夹</p>
      </div>
    </div>
    <div class="ipad-8-3">
      <img :src="`${data.img22}`" />
      <div>
        <p>支持智能键盘</p>
      </div>
    </div>
    <div class="ipad-8-4">
      <img :src="`${data.img23}`" />
      <div>
        <p>支持蓝牙键盘</p>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      data: null,
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      let url = "http://localhost:3000/ipadImg/2";
      axios.get(url).then(res => {
        console.log(res);
        this.data = res.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
<style scoped src="../assets/css/ipadzj.css"></style>
